import {useParams} from "react-router-dom";
import {Spin} from "antd"
import useRegistration from "@/hooks/useRegistration";
import {AimOutlined, LikeOutlined} from "@ant-design/icons";
import "./Detail.scss"

const Detail = () => {

    // 路由传递过来的params参数 医院的编码
    const {hoscode} = useParams()

    const {registration, loading} = useRegistration(hoscode as string)


    const render = () => {
        if (loading) {
            return (
                <Spin spinning={loading}></Spin>
            )
        } else {
            return (
                <>
                    <div className='title'>
                        <h2>{registration?.hospital.hosname}</h2>
                        <p className='level'>
                            <LikeOutlined className='level-icon'/>
                            {registration?.hospital.param.hostypeString}
                        </p>
                    </div>
                    <div className='logo-route'>
                        <img src={'data:image/jpeg;base64,' + registration?.hospital.logoData} alt={registration?.hospital.hosname} className='hospital-img'/>
                        <AimOutlined className='logo-route-icon'/>
                        <p>
                            具体地址：{registration?.hospital.param.fullAddress}
                            <br/>
                            规划路线：{registration?.hospital.route}
                        </p>
                    </div>

                    <div>
                        <p>
                            {
                                registration?.bookingRule.rule.map(item => <p key={item}>{item}</p>)
                            }
                        </p>
                    </div>

                    <div className='intro'>
                        <h3>医院介绍</h3>
                        <div className='intro-text'>{registration?.hospital.intro}</div>
                    </div>
                </>
            )
        }
    }
    return (
        <div className='m-l-30 m-r-30 detail'>
            {render()}
        </div>
    )
}

export default Detail
